var drawingApp = (function () {

	"use strict";
	var canvas,
		context,
		textArea,
		wordProblem,
		problemDoc,
		names,
		objects,
		margins = 30,
		canvasWidth = window.innerWidth -margins,
		canvasHeight = window.innerHeight - margins,
		colorPurple = "#cb3594",
		colorGreen = "#659b41",
		colorYellow = "#ffcf33",
		colorBrown = "#5882FA",
		outlineImage = new Image(),
		crayonImage = new Image(),
		crayonImageR = new Image(),
		markerImage = new Image(),
		markerImageR = new Image(),
		eraserImage = new Image(),
		eraserImageR = new Image(),
		rulerImageR = new Image(),
		hintImage = new Image(),
		refreshImage = new Image(),
		nextImage = new Image(),
		crayonTextureImage = new Image(),
		clickX = [],
		clickY = [],
		clickColor = [],
		clickTool = [],
		clickSize = [],
		clickDrag = [],
		paint = false,
		curColor = colorPurple,
		curTool = "crayon",
		curSize = "normal",
		mediumStartX = 18,
		mediumStartY = 19,
		mediumSpacing = 46,
		mediumSelectionX=34,
		mediumImageWidth = 93,
		mediumImageHeight = 46,
		drawingAreaX = 111,
		drawingAreaY = 11,
		toolsAreaWidth = mediumImageWidth,
		toolAreaHeight = 220,
		drawingAreaWidth = (canvasWidth - drawingAreaX) - toolsAreaWidth,
		drawingAreaHeight = canvasHeight - drawingAreaY-12,
		toolHotspotStartY = 23,
		toolHotspotHeight = 38,
		sizeHotspotStartY = 157,
		sizeHotspotHeight = 55,
		totalLoadResources = 12,
		font = 40,
		curLoadResNum = 0,
		sizeHotspotWidthObject = {
			huge: 32,
			large: 22,
			normal: 14,
			small: 18
		},

		// Clears the canvas.
		clearCanvas = function () {

			context.clearRect(0, 0, canvasWidth+margins, canvasHeight+margins);
		},

		// Redraws the canvas.
		redraw = function () {

			var locX,
				locY,
				radius,
				i,
				selected,
				//draws the tools menu
				wordWrap = function( str, width, min, max) {
					min = min || 0;
					width = width || str.length();
					max = max || str.length;
					if ( width > max)
					{
						width = max;
					}
					else if (width < min)
					{
						width = min;
					}
					var cursor = 0;
					var textLocY = drawingAreaY+margins+font;
					var printSize = context.measureText(str).width
					while (  printSize > width )
					{
						var charWidth =  Math.floor(width/(printSize/str.length)) ;
						var tmpCharWidth =  charWidth ;
						while (str.charAt(tmpCharWidth) != " " && tmpCharWidth > 0)
						{
							tmpCharWidth -= 1;
						}
						if(tmpCharWidth != 0)
						{
							charWidth = tmpCharWidth;
						}
						var line = str.slice(0,charWidth); 
						if(line[0] == " ")
						{
							line = line.slice(1,charWidth); //remove inclusive space
						}
						context.fillText(line, drawingAreaX+margins, textLocY);
						str = str.slice(charWidth);
						printSize = context.measureText(str).width;
						textLocY += font+15;
						cursor += charWidth;
					}
					if(str[0] == " ")
					{
						str = str.slice(1,charWidth); //remove inclusive space
					}
					context.fillText(str, drawingAreaX+margins, textLocY);
					 
				},
				drawWordProblem = function () {
					//textArea.value = generateWordProblem();
				    context.font = 'italic ' + (font-4) + 'pt Comic Sans MS';
					textArea.value = wordWrap(wordProblem,drawingAreaWidth-(margins*2),drawingAreaX + toolsAreaWidth+20,drawingAreaWidth-(margins*2) +1);
					//context.fillText(textArea.value, drawingAreaX+margins, drawingAreaY+margins+font);
				},
				drawTools = function (tool) {
				    locY = mediumStartY;
					if (tool == "crayon") {
						context.drawImage(crayonImageR, canvasWidth-mediumImageWidth ,mediumStartY, mediumImageWidth, mediumImageHeight);
						locY += mediumSpacing;
						context.drawImage(markerImageR, mediumSelectionX, 0, mediumImageWidth, mediumImageHeight, canvasWidth-mediumImageWidth, locY, mediumImageWidth-mediumSelectionX, mediumImageHeight);
						locY += mediumSpacing;
						context.drawImage(eraserImageR, mediumSelectionX, 0, mediumImageWidth, mediumImageHeight, canvasWidth-mediumImageWidth, locY, mediumImageWidth-mediumSelectionX, mediumImageHeight);
					}
					else if (tool== "marker") {
						context.drawImage(crayonImageR, mediumSelectionX, 0, mediumImageWidth, mediumImageHeight, canvasWidth-mediumImageWidth, locY, mediumImageWidth-mediumSelectionX, mediumImageHeight);
						locY += mediumSpacing;
						context.drawImage(markerImageR, canvasWidth-mediumImageWidth ,locY, mediumImageWidth, mediumImageHeight);
						locY += mediumSpacing;
						context.drawImage(eraserImageR, mediumSelectionX, 0, mediumImageWidth, mediumImageHeight, canvasWidth-mediumImageWidth, locY, mediumImageWidth-mediumSelectionX, mediumImageHeight);
					}
					else
					{
						context.drawImage(crayonImageR, mediumSelectionX, 0, mediumImageWidth, mediumImageHeight, canvasWidth-mediumImageWidth, locY, mediumImageWidth-mediumSelectionX, mediumImageHeight);
						locY += mediumSpacing;
						context.drawImage(markerImageR, mediumSelectionX, 0, mediumImageWidth, mediumImageHeight, canvasWidth-mediumImageWidth, locY, mediumImageWidth-mediumSelectionX, mediumImageHeight);
						locY += mediumSpacing;
						context.drawImage(eraserImageR, canvasWidth-mediumImageWidth ,locY, mediumImageWidth, mediumImageHeight);
					}
					locY+=mediumSpacing;
					context.drawImage(rulerImageR, canvasWidth-mediumImageWidth+2, locY, rulerImageR.width, rulerImageR.height);
				},
				drawCrayon = function (x, y, color, selected) {

					context.beginPath();
					context.moveTo(x + 41, y + 11);
					context.lineTo(x + 41, y + 35);
					context.lineTo(x + 29, y + 35);
					context.lineTo(x + 29, y + 33);
					context.lineTo(x + 11, y + 27);
					context.lineTo(x + 11, y + 19);
					context.lineTo(x + 29, y + 13);
					context.lineTo(x + 29, y + 11);
					context.lineTo(x + 41, y + 11);
					context.closePath();
					context.fillStyle = color;
					context.fill();

					if (selected) {
						context.drawImage(crayonImage, x, y, mediumImageWidth, mediumImageHeight);
					} else {
						context.drawImage(crayonImage, 0, 0, mediumImageWidth-mediumSelectionX, mediumImageHeight, x, y, mediumImageWidth-mediumSelectionX, mediumImageHeight);
					}
				},

				drawMarker = function (x, y, color, selected) {

					context.beginPath();
					context.moveTo(x + 10, y + 24);
					context.lineTo(x + 10, y + 24);
					context.lineTo(x + 22, y + 16);
					context.lineTo(x + 22, y + 31);
					context.closePath();
					context.fillStyle = color;
					context.fill();

					if (selected) {
						context.drawImage(markerImage, x, y, mediumImageWidth, mediumImageHeight);
					} else {
						context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, x, y, 59, mediumImageHeight);
					}
				};

			// Make sure required resources are loaded before redrawing
			if (curLoadResNum < totalLoadResources) {
				return;
			}

			clearCanvas();

			// Keep the drawing in the drawing area
			context.save();
			context.beginPath();
			context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
			context.clip();

			// For each point drawn
			for (i = 0; i < clickX.length; i += 1) {

				// Set the drawing radius
				switch (clickSize[i]) {
				case "small":
					radius = 2;
					break;
				case "normal":
					radius = 5;
					break;
				case "large":
					radius = 10;
					break;
				case "huge":
					radius = 20;
					break;
				default:
					break;
				}

				// Set the drawing path
				context.beginPath();
				// If dragging then draw a line between the two points
				if (clickDrag[i] && i) {
					context.moveTo(clickX[i - 1], clickY[i - 1]);
				} else {
					// The x position is moved over one pixel so a circle even if not dragging
					context.moveTo(clickX[i] - 1, clickY[i]);
				}
				context.lineTo(clickX[i], clickY[i]);

				// Set the drawing color
				if (clickTool[i] === "eraser") {
					//context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white
					context.strokeStyle = 'white';
				} else {
					//context.globalCompositeOperation = "source-over";	// To erase instead of draw over with white
					context.strokeStyle = clickColor[i];
				}
				context.lineCap = "round";
				context.lineJoin = "round";
				context.lineWidth = radius;
				context.stroke();
			}
			context.closePath();
			//context.globalCompositeOperation = "source-over";// To erase instead of draw over with white
			context.restore();
			
			drawWordProblem();
			
			//draw tools area white rectangle for words to 
			context.beginPath();
			context.rect(canvasWidth-toolsAreaWidth+3,drawingAreaY,canvasWidth,canvasHeight);
			context.closePath();
			context.fillStyle = "white";
			context.fill();
			
						var left=20,right=drawingAreaX-left-5,top=320,bottom=280;
			
			//add scrible
			context.beginPath();
			context.lineCap = "round";
			context.lineJoin = "round";
			context.strokeStyle=curColor;
			context.lineWidth="20";
			context.moveTo(55,bottom-25);
			context.lineTo(10,top );
			context.lineTo(75,bottom-10 );
			context.lineTo(15, top+35);
			context.lineTo(100,bottom );
			context.lineTo(20, top+65);
			context.lineTo(105,bottom +35 );
			context.lineTo(60, top+55);
			context.stroke();
			
			var shiftX = canvasWidth-toolsAreaWidth;
			context.beginPath();
			context.lineCap = "round";
			context.lineJoin = "round";
			context.strokeStyle=curColor;
			context.lineWidth="20";
			context.moveTo(shiftX+55,bottom-5);
			context.lineTo(shiftX+10,top );
			context.lineTo(shiftX+65,bottom+15 );
			context.lineTo(shiftX+25, top+25);
			context.lineTo(shiftX+85,bottom +25 );
			context.lineTo(shiftX+50, top+55);
			//context.lineTo(shiftX+115,bottom +45 );
			//context.lineTo(shiftX+60, top+55);
			context.stroke();
			//draw refresh - top circle
			
		    context.beginPath();
			context.lineCap = "round";
			context.lineJoin = "round";
			context.strokeStyle="black";curColor;
			context.lineWidth="10";
			context.moveTo(left,top);
			context.bezierCurveTo(left,bottom,right,bottom,right, top-5);
			//draw arrow head
			context.lineTo(right,top-30 );
			context.lineTo(right-20,top-10 );
			context.lineTo(right, top-5 );
			context.stroke();
			
			//draw bottom circle offset some
			var left=20,right=drawingAreaX-left,top=320,bottom=370;
		    context.beginPath();
			context.lineWidth="10";
			context.moveTo(left,top);
			context.bezierCurveTo(left,bottom,right,bottom,right+5, top);
			context.stroke();
			
			//draw next arrow
			context.beginPath();
			context.lineWidth="15";
			left=canvasWidth-80;
			right = canvasWidth-12;
			context.moveTo(left,top);
			context.lineTo(right,top);
			context.lineTo(right-35,top-30 );
			context.lineTo(right-30, top+35 );
			context.lineTo(right,top);
			context.stroke();
			
			// Drawing Area rectangle
			context.beginPath();
			context.lineCap = "round";
			context.lineJoin = "round";
			context.strokeStyle="black";
			context.lineWidth="8";
			context.moveTo(drawingAreaX,drawingAreaY);
			context.lineTo(drawingAreaX+10,drawingAreaHeight+drawingAreaY);
			context.lineTo(drawingAreaWidth+drawingAreaX+6,drawingAreaHeight+drawingAreaY);
			context.moveTo(drawingAreaWidth+drawingAreaX-6,drawingAreaHeight+drawingAreaY+6);
			context.lineTo(drawingAreaWidth+drawingAreaX,drawingAreaY);
			context.lineTo(drawingAreaX+10,drawingAreaY);
			context.stroke();
			
			//jlk --------------------------------------------------- possibly tile crayon texture background -------------------------------------
			// tile a crayon texture (if the current tool is crayon)
			if (curTool === "crayon") {
				context.globalAlpha = 0.4; // No IE support
				for(var x=0;x<Math.ceil(canvasWidth/crayonTextureImage.width);x++)
				{
					for(var y=0;y<Math.ceil(canvasHeight/crayonTextureImage.height);y++)
					{
						context.drawImage(crayonTextureImage, x*crayonTextureImage.width, y*crayonTextureImage.height, crayonTextureImage.width, crayonTextureImage.height);
					}
				}
			}
			context.globalAlpha = 1; // No IE support

			
			if (curTool === "crayon") {

				// Draw the crayon tool background
				//jlk context.drawImage(crayonBackgroundImage, (drawingAreaX+drawingAreaWidth), drawingAreaY+drawingAreaHeight, toolaAreaWidth, toolsAreaHeight);
				drawTools(curTool);
				
				// Draw purple crayon
				selected = (curColor === colorPurple);
				locX = selected ? mediumStartX : mediumStartX+mediumSelectionX;
				locY = mediumStartY;
				drawCrayon(locX, locY, colorPurple, selected);

				// Draw green crayon
				selected = (curColor === colorGreen);
				locX = selected ? mediumStartX : mediumStartX+mediumSelectionX;
				locY += mediumSpacing;
				drawCrayon(locX, locY, colorGreen, selected);

				// Draw yellow crayon
				selected = (curColor === colorYellow);
				locX = selected ? mediumStartX : mediumStartX+mediumSelectionX;
				locY += mediumSpacing;
				drawCrayon(locX, locY, colorYellow, selected);

				// Draw brown crayon
				selected = (curColor === colorBrown);
				locX = selected ? mediumStartX : mediumStartX+mediumSelectionX;
				locY += mediumSpacing;
				drawCrayon(locX, locY, colorBrown, selected);

			} else if (curTool === "marker") {

				// Draw the marker tool background
				//jlk context.drawImage(markerBackgroundImage, 0, 0, canvasWidth, canvasHeight);
				drawTools(curTool);
				// Draw purple marker
				selected = (curColor === colorPurple);
				locX = selected ? mediumStartX : mediumStartX+mediumSelectionX;
				locY = mediumStartY;
				drawMarker(locX, locY, colorPurple, selected);

				// Draw green marker
				selected = (curColor === colorGreen);
				locX = selected ? mediumStartX : mediumStartX+mediumSelectionX;
				locY += mediumSpacing;
				drawMarker(locX, locY, colorGreen, selected);

				// Draw yellow marker
				selected = (curColor === colorYellow);
				locX = selected ? mediumStartX : mediumStartX+mediumSelectionX;
				locY += mediumSpacing;
				drawMarker(locX, locY, colorYellow, selected);

				// Draw brown marker
				selected = (curColor === colorBrown);
				locX = selected ? mediumStartX : mediumStartX+mediumSelectionX;
				locY += mediumSpacing;
				drawMarker(locX, locY, colorBrown, selected);

			} else if (curTool === "eraser") {

				//jlk context.drawImage(eraserBackgroundImage, 0, 0, canvasWidth, canvasHeight);
				drawTools(curTool);
				context.drawImage(eraserImage, mediumStartX, mediumStartY, mediumImageWidth, mediumImageHeight);
			}
			
			// Draw line on ruler to indicate size
			locX = canvasWidth - toolsAreaWidth+2;
			switch (curSize) {
			case "small":
				//locX = 467;
				locX += 75;
				break;
			case "normal":
				//locX += 450;
				locX += 60;
				break;
			case "large":
				//locX += 428;
				locX += 41;
				break;
			case "huge":
				//locX += 399;
				locX +=16;
				break;
			default:
				break;
			}
						
			locY = 200;
			context.beginPath();
			context.rect(locX, locY, 2, 12);
			context.closePath();
			context.fillStyle = '#333333';
			context.fill();
			

		},
		loadProblemDoc = function ()
		{
			var xmlhttp;
			if (window.XMLHttpRequest)
			{// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
			}
			else
			{// code for IE6, IE5
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					textArea.value=xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","RUCKUS-Rockstars-Word-Problems.csv",false);
			xmlhttp.send();
		},
		generateWordProblem = function () {
			
				//
			//generate random numbers
			//insert names
			//insert nouns
			loadProblemDoc();
			var wordProblems =  new Array();
			wordProblems = textArea.value.split(',');
			textArea.value = wordProblems[0];
			textArea.value = textArea.value.replace(/=/g,"");//get problem template
			textArea.value = textArea.value.replace(/&/g,"+");//get problem template
			textArea.value = textArea.value.slice(1,textArea.value.length-1);
			textArea.value = textArea.value.replace(/\"\"/g,"\"");//get problem template
			//var wordProblem;
			var P1 = "BIll";
			var N1 = Math.ceil(10*Math.random());
			var O1 = "Apples";
			var P2 = "Ted";
			var N2 = Math.ceil(10*Math.random());
			
			wordProblem = eval(textArea.value);
			
			//for (i=0;i<wordProblem.length;i++)
			{
				//wordProblem[i] = wordProblem[i].replace(/"/g,"")
			}
			
			//textArea.value = eval(wordProblem);
			//return wordProblem;//textArea.value;
		},
		// Adds a point to the drawing array.
		// @param x
		// @param y
		// @param dragging
		addClick = function (x, y, dragging) {

			clickX.push(x);
			clickY.push(y);
			clickTool.push(curTool);
			clickColor.push(curColor);
			clickSize.push(curSize);
			clickDrag.push(dragging);
		},

		// Add mouse and touch event listeners to the canvas
		createUserEvents = function () {

			var press = function (e) {
				// Mouse down location
				var sizeHotspotStartX,
					mouseX = e.pageX - this.offsetLeft,
					mouseY = e.pageY - this.offsetTop;

				if (mouseX < drawingAreaX) { // Left of the drawing area
					if (mouseX > mediumStartX) {
						if (mouseY > mediumStartY && mouseY < mediumStartY + mediumImageHeight) {
							curColor = colorPurple;
						} else if (mouseY > mediumStartY + mediumImageHeight && mouseY < mediumStartY + mediumImageHeight * 2) {
							curColor = colorGreen;
						} else if (mouseY > mediumStartY + mediumImageHeight * 2 && mouseY < mediumStartY + mediumImageHeight * 3) {
							curColor = colorYellow;
						} else if (mouseY > mediumStartY + mediumImageHeight * 3 && mouseY < mediumStartY + mediumImageHeight * 4) {
							curColor = colorBrown;
						}
						else if (mouseY >250 && mouseY <400)
						{
							for (var d = 0; d < clickX.length; d += 1) {
								clickX[d] = "";
							}
							redraw();
						}
					}
				} else if (mouseX > drawingAreaX + drawingAreaWidth) { // Right of the drawing area

					if (mouseY > toolHotspotStartY) {
						if (mouseY > sizeHotspotStartY) {
							sizeHotspotStartX = drawingAreaX + drawingAreaWidth;
							if (mouseY < sizeHotspotStartY + sizeHotspotHeight && mouseX > sizeHotspotStartX) {
								if (mouseX < sizeHotspotStartX + sizeHotspotWidthObject.huge) {
									curSize = "huge";
								} else if (mouseX < sizeHotspotStartX + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge) {
									curSize = "large";
								} else if (mouseX < sizeHotspotStartX + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge) {
									curSize = "normal";
								} else if (mouseX < sizeHotspotStartX + sizeHotspotWidthObject.small + sizeHotspotWidthObject.normal + sizeHotspotWidthObject.large + sizeHotspotWidthObject.huge) {
									curSize = "small";
								}
							}
							else if (mouseY >250 && mouseY <400)
							{
								for (var d = 0; d < clickX.length; d += 1) {
									clickX[d] = "";
								}
								generateWordProblem();
								redraw();
							}
						} else {
							if (mouseY < toolHotspotStartY + toolHotspotHeight) {
								curTool = "crayon";
							} else if (mouseY < toolHotspotStartY + toolHotspotHeight * 2) {
								curTool = "marker";
							} else if (mouseY < toolHotspotStartY + toolHotspotHeight * 3) {
								curTool = "eraser";
							}
						}
					}
				}
				paint = true;
				addClick(mouseX, mouseY, false);
				redraw();
			},

				drag = function (e) {
					if (paint) {
						addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
						redraw();
					}
					// Prevent the whole page from dragging if on mobile
					e.preventDefault();
				},

				release = function () {
					paint = false;
					redraw();
				},

				cancel = function () {
					paint = false;
				};

			// Add mouse event listeners to canvas element
			canvas.addEventListener("mousedown", press, false);
			canvas.addEventListener("mousemove", drag, false);
			canvas.addEventListener("mouseup", release);
			canvas.addEventListener("mouseout", cancel, false);

			// Add touch event listeners to canvas element
			canvas.addEventListener("touchstart", press, false);
			canvas.addEventListener("touchmove", drag, false);
			canvas.addEventListener("touchend", release, false);
			canvas.addEventListener("touchcancel", cancel, false);
		},

		// Calls the redraw function after all neccessary resources are loaded.
		resourceLoaded = function () {

			curLoadResNum += 1;
			if (curLoadResNum === totalLoadResources) {
				generateWordProblem();
				redraw();
				createUserEvents();
			}
		},

		// Creates a canvas element, loads images, adds events, and draws the canvas for the first time.
		init = function () {
			
			// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
			canvas = document.createElement('canvas');
			canvas.setAttribute('width', canvasWidth);
			canvas.setAttribute('height', canvasHeight);
			canvas.setAttribute('id', 'canvas');
			document.getElementById('canvasDiv').appendChild(canvas);
			textArea = document.getElementsByTagName("textarea")[0];
			if (typeof G_vmlCanvasManager !== "undefined") {
				canvas = G_vmlCanvasManager.initElement(canvas);
			}
//						var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||    // alternative standard method  
            //(document.mozFullScreen || document.webkitIsFullScreen);
//
			//var docElm = document.getElementById('canvasDiv');
			//if (!isInFullScreen) {
//
				//if (docElm.requestFullscreen) {
//					docElm.requestFullscreen();
				//}
				//else if (docElm.mozRequestFullScreen) {
//					docElm.mozRequestFullScreen();
					//alert("Mozilla entering fullscreen!");
				//}
				//else if (docElm.webkitRequestFullScreen) {
//					docElm.webkitRequestFullScreen();
					//alert("Webkit entering fullscreen!");
				//}
			//}
			context = canvas.getContext("2d"); // Grab the 2d canvas context
			// Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
			//     context = document.getElementById('canvas').getContext("2d");

			// resize the canvas to fill browser window dynamically
			window.addEventListener('resize', resizeCanvas, false);
			
			function resizeCanvas() {
			    clearCanvas();
				canvasWidth = window.innerWidth -35,
				canvasHeight = window.innerHeight - 35,
				canvas.setAttribute('width', canvasWidth);
				canvas.setAttribute('height', canvasHeight);
				drawingAreaWidth = (canvasWidth - drawingAreaX) - toolsAreaWidth,
				drawingAreaHeight = canvasHeight - drawingAreaY,

				/**
				 * Your drawings need to be inside this function otherwise they will be reset when 
				 * you resize the browser window and the canvas goes will be cleared.
				 */
				
				redraw(); 
			};
			// Load images
			crayonImage.onload = resourceLoaded;
			crayonImage.src = "crayon-outline.png";
			
			crayonImageR.onload = resourceLoaded;
			crayonImageR.src = "crayon-outline-r.png";

			markerImage.onload = resourceLoaded;
			markerImage.src = "marker-outline.png";
			
			markerImageR.onload = resourceLoaded;
			markerImageR.src = "marker-outline-r.png";

			eraserImage.onload = resourceLoaded;
			eraserImage.src = "eraser-outline.png";
			
			eraserImageR.onload = resourceLoaded;
			eraserImageR.src = "eraser-outline-r.png";

			refreshImage.onload = resourceLoaded;
			refreshImage.src = "refresh.jpg";

			nextImage.onload = resourceLoaded;
			nextImage.src = "next1.jpg";

			//eraserBackgroundImage.onload = resourceLoaded;
			//eraserBackgroundImage.src = "eraser-background.png";

			crayonTextureImage.onload = resourceLoaded;
			crayonTextureImage.src = "crayon-texture.png";

			outlineImage.onload = resourceLoaded;
			outlineImage.src = "watermelon-duck-outline.png";
			
			rulerImageR.onload = resourceLoaded;
			rulerImageR.src = "ruler-r.png";
			
			hintImage.onload = resourceLoaded;
			hintImage.src = "help.jpg";
		};

	return {
		init: init
	};
}());